<template>
	<navbar title="申请售后" :isBack="true"></navbar>
	<view style="padding-bottom: 150rpx;">
		<view class="card">
			<view class="form noborder">
				<view class="xing">*</view>
				<view class="label">申请类型</view>
				<view class="content" @tap="openPicker(1)">
					<view class="formpick">{{classText}}</view>
					<!-- <picker @change="changeType" :value="type_index" :range="type" range-key="title" style="flex: 1;font-size: 32rpx;">
						<view class="formpick">{{type[type_index].title}}</view>
					</picker> -->
				</view>
				<image @tap="openPicker(1)" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/user/address/zuojiantou%403x.png"
					mode="widthFix" class="formicon"></image>
			</view>
		</view>
		<view class="card">
			<view class="form noborder">
				<view class="xing">*</view>
				<view class="label">申请原因</view>
				<view class="content" @tap="openPicker(2)">
					<view class="formpick">{{info.reason[reason_index].name}}</view>
					<!-- <picker @change="changeReason" :value="reason_index" range-key="name" :range="info.reason"
						style="flex: 1;">
						<view class="formpick">{{info.reason[reason_index].name}}</view>
					</picker> -->
				</view>
				<image @tap="openPicker(2)" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/user/address/zuojiantou%403x.png"
					mode="widthFix" class="formicon"></image>
			</view>
		</view>
		<view class="apply_pice">
			<view class="apply_pice_title">申请金额</view>
			<view class="apply_pice_num">¥{{ param.type== 3 ? 0 : info.price}}</view>
			<view class="apply_pice_body" v-if="param.type==1">
				<view class="apply_pice_body_info">平台收到货检验无误后将退还金额</view>
				<view class="apply_pice_body_infob">
					<view class="yuandian"></view>
					<view class="info">退款金额原路退还到您下单账户</view>
				</view>
			</view>
			<view class="apply_pice_body" v-if="param.type==2">
				<view class="apply_pice_body_info">平台收到货检验无误后将退还金额</view>
				<view class="apply_pice_body_infob">
					<view class="yuandian"></view>
					<view class="info">退款金额原路退还到您下单账户</view>
				</view>
			</view>
			<view class="apply_pice_body" v-if="param.type==3">
				<view class="apply_pice_body_info">平台收到货物后确认无误将会生成新的发货订单</view>
			</view>
		</view>
		<view class="goods_body">
			<view  >商品信息</view>
			<view v-for="(item,index) in info.goods" :key="index">
				<view class="center">
					<image mode="aspectFill" class="cover" :src="item.goods_cover"></image>
					<view class="shop_title">
						<view class="shop_title_top">
							<view class="shop_title_top_name shenglueh2 ellipsis-2">
								{{item.goods_name}}
							</view>
							<view class="shop_title_top_price" style="font-weight: bold;font-size: 32rpx;">
								<span style="font-size: 20rpx;">￥</span>
								<span>{{item.goods_price}}</span>
							</view>
						</view>
						<view class="shop_title_bom JSB" style="width:100%">
							<span style="width: 364rpx;">{{item.specs}}</span> 
							<text style="position: absolute;right: 33rpx;">×{{item.num}}</text>
				 
							<!-- <view class="shop_title_bom_state" style="color:  #4091ff;"
									@click="toShop(item.goods_id,index,item.id)" v-if="type_index==2">重新选择</view> -->
						</view>
					</view>
				</view>
				<view v-if="param.type==3">
					<view class="btnsSize" @click="toShop(item.goods_id,index,item.id)">重新选择规格</view>
				</view>
			</view>
		</view>
		<view class=" card1">
			<view class="xing"></view>
			<view class="label">申请说明</view>
			<view class="content">
				<textarea v-model="param.memo" placeholder="请描述您的申请原因" placeholder-class="inputplace"
					class="textarea" />
			</view>
			<view class="image-box">
				<view class="imges" v-for="(item,key) in param.images" :key="key">
					<image :src="item" mode="aspectFill" class="imgessrc"></image>
					<view class="delete" @tap="deleteimg(key)">x</view>
				</view>
				<view class="imges imges-border" @tap="upload()" style="border-radius: 20rpx;">
					<image :src="imageUrl+'jiahao_img.png'" mode="widthFix" class="imgsicon"></image>
					<view class="imgtext">上传图片</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="form">
				<view class="label">联系电话</view>
				<view class="content">
					<input v-model="info.mobile" placeholder="请输入联系电话" placeholder-class="inputplace" class="input" />
				</view>
				<view class="formicon"></view>
			</view>
		</view>

		<view class="apfooter">
			<view class="btns" @tap="submit()">提交</view>
		</view>
		<view class="buymodel" v-if="buy_model" @tap="buy_model = false">
			<view class="white" @tap.stop="">
				<view class="top">
					<image :src="chooseData.chooseImage" mode="aspectFill" class="cover"></image>
					<view class="right">
						<image class="colse_choose" :src="imageUrl+'colse_chooseshop.png'" mode="aspectFill"
							@click="buy_model=false"></image>
						<view class="titles">{{chooseData.chooseName}}</view>
						<view class="bfooter">
							<text>￥</text>
							<!-- <text class="price">{{chooseData.choosePrice}}</text> -->
							<text class="price">{{goodsInfo.price}}</text>
						</view>
						<view class="choose_shop">
							已选：“{{chooseData.chooseShop}}” - 库存：{{chooseData.stock}}
						</view>
					</view>
				</view>
				<view class="sizeboxc">
					<view class="bodys">
						<view>
							<view class="btitle">{{goodsInfo.size_info.title[0].name}}</view>
							<!-- 选中 active -->
							<view class="bcontent">
								<view
									:class="['item',(keys + 1) % 4 ?'' : 'itemnotop',items.choose==1 ? 'active' : items.choose== 0 ? '' : 'active2']"
									v-for="(items,keys) in goodsInfo.size_info.title[0].children" :key="keys"
									@tap="changeSize(0,items,keys)">
									{{items.name}}
								</view>
							</view>
						</view>
						<view v-if="goodsInfo.size_info.title.length>1">
							<view class="btitle">{{goodsInfo.size_info.title[1].name}}</view>
							<view class="bcontent">
								<view
									:class="['item',(keys + 1) % 4 ?'' : 'itemnotop',items.choose==1 ? 'active' : items.choose== 0 ? '' : 'active2']"
									v-for="(items,keys) in goodsInfo.size_info.title[1].children" :key="keys"
									@tap="changeSize(1,items,keys)">
									{{items.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="numbox">
					<!-- 	<view class="name">选择数量</view>
						<view class="btns" @tap="setNum(1)">
							<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/goods/6.png" mode="widthFix"
								class="icons"></image>
						</view>
						<input v-model="num" type="number" class="input" disabled />
						<view class="btns rightb" @tap="setNum(2)">
							<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/goods/7.png" mode="widthFix"
								class="icons"></image>
						</view> -->
				</view>
				<view class="footers">
					<view class="btnss" @tap="upData()">确定选择</view>
				</view>
			</view>
		</view>
	</view>
	<u-picker v-model="pickerShow" mode="selector" :range="type" range-key="name" @confirm="pickerConfirm"></u-picker>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue'
	import { shopAfterSales, shopAfterSalesDo, shopGetGoodsInfo } from '@/service/api/shop'
	import tools from '@/utils/tools'
	const logoAddSize = ref(false)
	const buy_model = ref(false)
	const imageUrl = ref('https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/')
	const type_index = ref(0)
	const pickerShow = ref(false)
	const type = ref([{
		name: '我要退款(无需退货)'
	},
	{
		name: '我要退货退款'
	},
	{
		name: '我要换货'
	}])
	const reason_index = ref(0)
	const classText = ref('我要退款(无需退货)')
	const info = reactive({
		mobile: "",
		price: 0,
		type: 0,
		reason: [{
			name: 'test'
		}],
		goods: []
	}) as any
	const chooseData = reactive({
		chooseName: '',
		chooseImage: '',
		choosePrice: 0,
		chooseShop: '',
		stock: 0,
	})
	const str = ref('')
	const str2 = ref('')
	const shopNum = ref(0)
	const num = ref(0)
	const goodsInfo = reactive({
		images: [],
		size_info: {
			title: [{
				name: ""
			}, { name: "" }]
		}
	}) as any
	const param = reactive({
		id: "",
		goods_ids: [],
		type: 1,
		apply_reason: "",
		memo: "",
		mobile: "",
		specs: [],
		images: []
	})
	const imagesList = ref([]) as any
	const model = ref(false)
	const goods_ids = ref([])
	const order_id = ref(0)
	const logoIndex = ref(0)
	const specs = ref([])
	const index = ref(0) //1是申请类型 2是申请原因
	onLoad((opt) => {
		param.id = opt.id;
		param.goods_ids = JSON.parse(opt.goods_ids);
		// 	let data = JSON.parse(opt.param);
		// 	order_id.value = data.id;
		// 	goods_ids.value = data.goods_id;
		getData()

	})
	const getData = async () => {
		const res = await shopAfterSales(param)
		for (let i in info) {
			info[i] = res.msg[i]
		}
		console.log(info);
	}
	const openPicker = (i : number) => {
		index.value = i;

		//1是申请类型 2是申请原因
		if (i == 1) {
			type.value = [{
				name: '我要退款(无需退货)'
			},
			{
				name: '我要退货退款'
			},
			{
				name: '我要换货'
			}
			]
		} else {
			type.value = info.reason
		}
		pickerShow.value = true;
	}
	const pickerConfirm = (v) => {
		//v是下标
		console.log(index.value);
		if (index.value == 1) {
			//申请类型
			type_index.value = v[0];
			param.type = v[0] + 1;
			classText.value = type.value[type_index.value].name

		} else {
			//申请原因
			reason_index.value = v[0]
		}


	}
	//重新选择规格
	const toShop = async (goods_id, index, id) => {
		logoIndex.value = index
		uni.showLoading({
			mask: true,
			title: "数据加载中"
		})
		const res = await shopGetGoodsInfo({ id: goods_id });
		if (res.code == 1) {
			for (let i in goodsInfo) {
				goodsInfo[i] = res.msg[i]
			}

			chooseData.chooseName = res.msg.name;
			chooseData.chooseImage = res.msg.cover;
			chooseData.choosePrice = res.msg.price;
			chooseData.chooseShop = '未选择';
			chooseData.stock = goodsInfo.stock;

			str2.value = ""
			str.value = ""
			buy_model.value = true
		} else {
			goodsInfo.id = 0;
		}
		uni.hideLoading()

	}
	//上传图片
	const upload = () => {
		tools.chooseImage().then((res : string[]) => {
			tools.getOssUrl<string[]>(res).then((url : any) => {
				param.images.push(url)
			})
		})
	}
	//删除上传图片
	const deleteimg = (key) => {
		param.images.splice(key, 1);
	}
	const changeSize = (index, item, keys) => {
		// choose 0(可选但未选中) 1(选中) 2(不可选)
		//未选中不走
		if (goodsInfo.size_info.title[index].children[keys].choose == 2) return false;
		//有两个选项的时候执行
		if (goodsInfo.size_info.title.length > 1) {
			reduction(index, item, keys)
			//展示商品的价格
			if (getshopinfo().price != 0) {
				chooseData.choosePrice = Number(Number(getshopinfo().price).toFixed(2))
				chooseData.chooseImage = getshopinfo().icon
			} else {
				chooseData.choosePrice = Number(goodsInfo.price)
			}
			chooseData.stock = getshopinfo().stock
			num.value = 1;

		} else {
			// 一个选项
			reductionOne(index, item, keys)
			//展示商品的价格
			if (getshopinfo().price != 0) {
				chooseData.choosePrice = Number(Number(getshopinfo().price).toFixed(2))
				chooseData.chooseImage = getshopinfo().icon
			} else {
				chooseData.choosePrice = Number(goodsInfo.price)
			}
			chooseData.stock = getshopinfo().stock
			num.value = chooseData.stock ? 1 : 0;

		}
	}
	const reductionOne = (index, item, keys) => {
		// index是选中哪一项的下表 item是选中的子属姓，keys是子属性的下标
		//取消选中
		if (goodsInfo.size_info.title[index].children[keys].choose == 1) {
			//把点击的选项赋值为0待选
			goodsInfo.size_info.title[index].children[keys].choose = 0;
			if (index == 0) {
				str.value = '';
			} else {
				str2.value = '';
			}
			//选中名称的方法判定
			chooseData.chooseShop = determine();
			// 反向遍历另一个数组赋值0
			return asd(index);
		}
		// 选中
		if (goodsInfo.size_info.title[index].children[keys].choose == 0) {
			goodsInfo.size_info.title[index].children.forEach((val, k) => {
				goodsInfo.size_info.title[index].children[k].choose = goodsInfo.size_info.title[
					index]
					.children[k].choose == 2 ? 2 : 0;
			})
			goodsInfo.size_info.title[index].children[keys].choose = 1;
			if (index == 0) {
				str.value = item.name;
			} else {
				str2.value = item.name;
			}
			chooseData.chooseShop = determine();
			return combination(goodsInfo.size_info.title[index].name, goodsInfo.size_info.title[
				index]
				.children[keys].name, index);
		}
	}
	//取消选择
	const asd = (key) => {
		let key2 = key ? 0 : 1;
		let title = goodsInfo.size_info.title[key2];
		title.children.forEach((item3, k) => {
			goodsInfo.size_info.title[key2].children[k].choose = goodsInfo.size_info.title[key2]
				.children[
				k].choose != 1 ? 0 : 1;
		})
	}
	// 选中执行
	const combination = (main, secondary, key) => {
		let data = []
		let key2 = key ? 0 : 1;
		let title = goodsInfo.size_info.title[key2];
		goodsInfo.size_info.data.forEach(item => {
			item.forEach(item2 => {
				if (item2[main] == secondary) {
					data.push(item2)
				}
			})
		})
		title.children.forEach((item3, k) => {
			data.forEach((item4) => {
				if (item4[title.name] == item3.name) {
					if (item4.stock == 0) {
						//库存为0不能选择
						goodsInfo.size_info.title[key2].children[k].choose = 2;
					} else {
						// 如果等于选中了就给他赋值0
						goodsInfo.size_info.title[key2].children[k].choose = goodsInfo.size_info.title[key2].children[k].choose != 1 ? 0 : 1;
					}
				}
			})
		})
	}
	//返回选中的商品名字
	const determine = () => {
		if (str.value && str2.value) return str.value + '-' + str2.value
		if (str.value && !str2.value) return str.value
		if (!str.value && str2.value) return str2.value
		if (!str.value && !str2.value) return '未选中'
	}
	// 获取选择的其他商品信息
	const getshopinfo = () => {
		let data = {
			price: 0,
			stock: 0,
			icon: goodsInfo.cover
		}
		goodsInfo.size_info.data.forEach(item => {
			item.forEach(item2 => {
				if (item2.name == chooseData.chooseShop) {
					data = item2
				}
			})
		})
		return data
	}
	//判断选中
	const reduction = (index, item, keys) => {
		// index是选中哪一项的下表 item是选中的子属姓，keys是子属性的下标
		//取消选中
		if (goodsInfo.size_info.title[index].children[keys].choose == 1) {
			//把点击的选项赋值为0待选
			goodsInfo.size_info.title[index].children[keys].choose = 0;
			if (index == 0) {
				str.value = '';
			} else {
				str2.value = '';
			}
			//选中名称的方法判定
			chooseData.chooseShop = determine();
			// 反向遍历另一个数组赋值0
			return asd(index);
		}
		// 选中
		if (goodsInfo.size_info.title[index].children[keys].choose == 0) {
			goodsInfo.size_info.title[index].children.forEach((val, k) => {
				goodsInfo.size_info.title[index].children[k].choose = goodsInfo.size_info.title[
					index]
					.children[k].choose == 2 ? 2 : 0;
			})
			goodsInfo.size_info.title[index].children[keys].choose = 1;
			if (index == 0) {
				str.value = item.name;
			} else {
				str2.value = item.name;
			}
			chooseData.chooseShop = determine();
			return combination(goodsInfo.size_info.title[index].name, goodsInfo.size_info.title[
				index]
				.children[keys].name, index);
		}
	}
	const upData = () => {
		let title = goodsInfo.size_info.title
		if (title.length == 0) return tools.showToast('数据错误请重新进入')
		if (title.length == 2 && (!str.value || !str2.value)) return tools.showToast('请选择完整规格')
		if (title.length == 1 && (!str.value && !str2.value)) return tools.showToast('请选择完整规格')
		if (num.value == 0) return tools.showToast('库存不足')
		info.goods[logoIndex.value].specs = chooseData.chooseShop
		logoAddSize.value = true
		tools.showToast('选择成功')
		buy_model.value = false
	}
	//提交
	const submit = async () => {
		console.log(param.goods_ids);
		info.goods.forEach((t) => {
			param.specs.push({ id: t.id, specs: t.specs })
		})
		param.apply_reason = info.reason[reason_index.value].name;
		param.mobile = info.mobile;
		const res = await shopAfterSalesDo(param);
		tools.showToast(res.msg)
		if (res.code == 1) {
			setTimeout(() => {
				tools.navTo('/pagesB/order/myOrder?type=2')
			}, 500)
		}


	}
</script>

<style scoped lang="scss">
	@import '@/static/css/pagesB/apply/apply.scss';

	.ellipsis-2 {
		// 注意，不要设置此标签的高度，下方代码设置了行数，会自动根据行数进行计算高度的。

		//文本超出部分以...形式展示
		text-overflow: -o-ellipsis-lastline;
		//整体超出部分隐藏
		overflow: hidden;
		//文本超出部分以...形式展示，同第一行样式代码
		text-overflow: ellipsis;
		//display 块级元素展示
		display: -webkit-box;
		//设置文本行数为2行
		-webkit-line-clamp: 2;
		//设置文本行数为2行
		line-clamp: 2;
		//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
		-webkit-box-orient: vertical;

	}

	:deep(.uni-picker-item) {
		font-size: 28rpx !important;
		line-height: 60rpx !important;
	}

	.card {
		margin: 30upx;
		padding: 0 30upx;
		border-radius: 20upx;
		background-color: #ffffff;
		font-size: 28upx;

		.form {
			padding: 30upx 0;
			border-bottom: 1upx solid #f1f1f1;
			display: flex;
			align-items: center;

			.label {}

			.content {
				flex: 1;
				display: flex;

				.input {
					flex: 1;
					text-align: left;
					font-size: 32rpx;
					margin-left: 60rpx;

				}

				.formpick {
					width: 100%;
					text-align: left;
					margin-left: 60rpx;
				}
			}

			.formicon {
				display: block;
				width: 12upx;
				margin-left: 20upx;
			}

			.formdefalt {
				display: block;
				width: 36rpx;
				height: 36rpx;
				border-radius: 10upx;
			}

			.formdefaltno {
				box-sizing: border-box;
				border: 1upx solid #cccccc;
			}
		}

		.noborder {
			border: none;
		}
	}

	.btns {
		width: 690upx;
		height: 90upx;
		text-align: center;
		line-height: 90upx;
		background: linear-gradient(90deg, #5062A7 0%, #354678 100%);
		border-radius: 10upx;
		color: white;
		margin: 30upx;
	}

	.btnsSize {
		width: 100%;
		height: 70upx;
		text-align: center;
		border-radius: 10rpx;
		line-height: 70upx;
		color: #000000;
		// background-color: #333333;
		border: 1rpx solid #e1e1e1;
	}
</style>
<style>
	page {
		background: #F5F6F8;
		font-size:28rpx
	}
</style>